@use "sass:map";
@import "palette.scss";

$light-selector: 'html[data-theme="light"]';
$dark-selector: 'html[data-theme="dark"]';
$light-text: #fff;
$dark-text: #2c3e50;
$dark-background-color: #1d2536;
$background-color: #fff;
$border-color: #e5e7eb;

:root {
    --pwa-popup-text-color: #2C3E50;
    --pwa-popup-bg-color: #ffffff;
    --pwa-popup-border-color: rgba(0,0,0,0.15);
    --pwa-popup-shadow: 0 4px 16px var(--pwa-popup-border-color);
    
    --pwa-popup-btn-text-color: white;
    --pwa-popup-btn-bg-color: #1755F4;
    --pwa-popup-btn-hover-bg-color: #1755F4;

    --google-translate-select-text-color-regular: #A1A7B3;
    --google-translate-select-fill-color-light: #555A66;
    --google-translate-select-border-color-light: #555A66;

    [data-theme="dark"] & {
        --pwa-popup-btn-bg-color: #4075FF;
        --pwa-popup-btn-hover-bg-color: #4075FF;
    }
    }
    
    body {
        overflow-x: hidden !important;
        font-family: "Inter" !important;
    }
    .site-name {
        display: none;
    }
    div[class*=language-] > button.copy-code-button:not(.pure) {
        background: #8687fb !important;
    }
    div[class*=language-] {
        pre[class*=language-] {
            padding-top: 1.1em;

            code {
                line-height: 1.375em;
            }
        }
    }
    
    .theme-container {
        position: relative;
        min-height: calc(100vh - 152px);
        padding-bottom: 152px;
        background: #F7F9FC;
    }

    [data-theme="dark"] .theme-container {
        background: #262B33;
    }
    
    [data-theme="dark"] img[src*="/full_logo_zksync-black.svg"] {
        content: url("/full_logo_zksync-white.svg");
    }

    .footer-wrapper {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
    
    .copy-icon {
        background: #1755F4 !important;
        
        [data-theme="dark"] & {
            background: #4075FF !important;
        }
    }
    
    .copyright {
        display: none;
    }
    
    p{
        hyphens: none !important;
        text-align: inherit !important;
    }

    .sidebar {
        box-shadow: 0 0 0 0;
    }

    [data-theme="light"] .sidebar {
        background: #E8ECF2;
        border-right: 1px solid #DADDE5;
    }

    [data-theme="dark"] .sidebar {
        border-right: 1px solid #3D424D;
        background: #262B33;

        a {
            color: rgba(133, 140, 153, 1);
        }
        .sidebar-links {
            span.title {
                color: white;
            }
        }
        .sidebar-link {
            &.active {
                color: white;
                border-right: 2px solid #739AFF;
                background: linear-gradient(90deg,rgba(115, 154, 255,.0),rgba(115, 154, 255,.5))
            }
        }
    }

    .sidebar-links {
        span.title {
            font-size: 1rem !important;
            font-weight: 700 !important;
        }

        .sidebar-link {
            font-size: 1rem !important;
            padding-left: 2.5rem;

            &.active {
                background: linear-gradient(90deg, rgba(23, 85, 244, 0), rgba(23, 85, 244, .3));
                border-left: none;
                border-right: 2px solid #1755F4;
                color:inherit
            }
        }

        .sidebar-group .sidebar-group {
            padding-left: 0.8em;
        }
    }

    // Direct links in the root of side nav should not be indented
    .sidebar > .sidebar-links > li > .sidebar-link {
        padding-left: 1.3rem;
    }

    * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    
    .newsletter-input {
        display: inline-block;
        width: 18rem;
        font-size: 1rem;
        color: #8c8dfc;
        background-color: #fff;
        padding: 0.5rem 1rem;
        margin: 0.1rem;
        border-radius: 4px;
        transition: background-color .1s ease;
        box-sizing: border-box;
        border: 1px solid #ddd;
    }
    
    .newsletter-button {
        display: inline-block;
        width: 10rem;
        font-size: 1rem;
        color: #8c8dfc;
        background-color: #fff;
        padding: 0.5rem 1.5rem;
        margin: 0.2rem;
        border-radius: 4px;
        transition: background-color .1s ease;
        box-sizing: border-box;
        border: 1px solid #ccc;
        cursor: pointer;
    }
    
    input[type="submit" i] {
        appearance: auto;
        user-select: none;
        white-space: pre;
        align-items: flex-start;
        text-align: center;
    }
    
    .landing .hero-img {
        max-width: 70%;
        width: 400px;
        margin: 10px auto;
    
        img {
            width: 100%;
            margin-bottom: 20px;
        }
    }
    
    // Table of Contents
    #toc {
        padding: 0 0 0 2rem;
        max-width: calc(50vw - 50% - 6rem); // Fill right-side of content

        .toc-wrapper {
            max-height: 66vh;
        }

        .toc-list::before {
            background: map.get($text-color, "light");
            
            [data-theme="dark"] & {
                background: map.get($text-color, "dark");
            }
        }

        .toc-link {
            color: $dark-text;

            [data-theme="dark"] & {
                color: $light-text;
            }
            
            &.level2 {
                font-weight: bold;
            }

            &.level3 {
                padding-left: 12px;
            }
        }

        .toc-item {
            &::before {
                transition: all 1s;
            }

            &.active {
                .toc-link {
                    font-weight: normal;
                    color: map.get($theme-color, "light");
                    
                    [data-theme="dark"] & {
                        color: map.get($theme-color, "dark");
                    }

                    &.level2 {
                        font-weight: bold;
                    }
                }

                &::before {
                    content: "->";
                    color: map.get($theme-color, "light");
                    
                    [data-theme="dark"] & {
                        color: map.get($theme-color, "dark");
                    }
                }
            }
        }
    }
    
    span.title {
        font-size: 14px !important;
    }
    
    hr {
        display: none !important;
    }

    .horizontal-rule {
        display: block !important;
        background-color: #EAEBEE;
        border: none;
        height: 1px;
        margin: 28px 0;

        [data-theme="dark"] & {
            background-color: #404041;
        }
    }
    
    tbody td a {
        white-space: nowrap;
    }
    
    a.title {
        font-weight: 700 !important;
    }
    
    .logo {
        height: 1.5rem !important;
        padding: 0.70rem 0 !important;
    }
    
    .external-link-icon {
        padding-left: 4px;
    }
    
    /* Mobile */
    @media screen and (max-width: 419px) {
        div[class*=language-] > button.copy-code-button:not(.pure) {
            border-radius: 15px !important;
            margin: 30px 0 -0.9rem 0 !important;
        }
        .copy-icon {
            margin: 0 0 30px -0.1rem !important;
        }
    }
    p.description {
        font-size: 16px !important;
    }
    
    h1#main-title {
        font-size: 30px !important;
    }
    
    .home.project .features {
    
        border-top: none !important;
    }
    
    //Homepage Redesign    
    [data-theme="dark"] a.title {
        color: $light-text !important;
    }
    
    [data-theme="light"] a.title {
        color: $dark-text !important;
    }
    
    [data-theme="light"] img[src*="/zksync_logo.svg"] {
        content: url("/zksync_logo_black.svg");
    }
    
    [data-theme="dark"] img[src*="/zksync_logo_black.svg"] {
        content: url("/zksync_logo.svg");
    }

    [data-theme="light"] img[src*="/images/x_logo.svg"] {
        content: url("/images/x_logo_black.svg");
    }
    
    [data-theme="dark"] img[src*="/images/x_logo_black.svg"] {
        content: url("/images/x_logo.svg");
    }

    [data-theme="light"] img[src*="/images/discord_logo.svg"] {
        content: url("/images/discord_logo_black.svg");
    }
    
    [data-theme="dark"] img[src*="/images/discord_logo_black.svg"] {
        content: url("/images/discord_logo.svg");
    }

    [data-theme="light"] img[src*="/images/github_logo.svg"] {
        content: url("/images/github_logo_black.svg");
    }
    
    [data-theme="dark"] img[src*="/images/github_logo_black.svg"] {
        content: url("/images/github_logo.svg");
    }
    
    [data-theme="dark"] h3 {
        color: $light-text !important;
    }
    
    [data-theme="light"] h3{
        color: $dark-text !important;
    }
    
    [data-theme="dark"] h1 {
        color: $light-text !important;
    }
    
    [data-theme="light"] h1 {
        color: $dark-text !important;
    }
    
    [data-theme="dark"] h2 {
        color: $light-text !important;
        border-bottom: none !important;
    }
    
    [data-theme="light"] h2{
        color: $dark-text !important;
        border-bottom: none !important;
    }
    
    [data-theme="dark"] h3 {
        color: $light-text !important;
    }
    
    [data-theme="light"] h3{
        color: $dark-text !important;
    }
    
    [data-theme="dark"] .feature {
        border: 1px solid #393939;
        border-radius: 8px;
        background-color: #252934;
    }
    
    [data-theme="light"] .feature {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background-color: $background-color;
    }
    
    [data-theme="light"] .font-icon {
        color: #1755F4 !important;
    }
    
    [data-theme="dark"] .font-icon {
        color: #4075FF !important;
    }
    
    .home.project .feature .font-icon {
        height: 44px;
        width: 44px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    span{
        font-size: 16px;
    }
    
    //Homepage css
    
    [data-theme="dark"] .site-name {
        color: $light-text !important;
    }
    
    [data-theme="light"] .site-name {
        color: $dark-text !important;
    }

    [data-theme="dark"] .google-translate-select-dropdown__menu li.selected {
        color: $light-text !important;
    }
    
    [data-theme="light"] .google-translate-select-dropdown__menu li.selected {
        color: $dark-text !important;
    }

    [data-theme="dark"] .google-translate-select-dropdown__menu {
        background-color: $dark-text !important;
    }
    
    [data-theme="light"] .google-translate-select-dropdown__menu {
        background-color: $light-text !important;
    }

    [data-theme="dark"] .google-translate-select-dropdown__menu__item :hover {
        color: #1d2536 !important;
    }
    
    [data-theme="light"] .google-translate-select-dropdown__menu__item :hover {
        color: #1d2536 !important;
    }

    [data-theme="dark"] .page {
        background: #262B33;
    }

    [data-theme="light"] .page {
        background: #F7F9FC;
    }

    .navbar {
        box-shadow: 0 0 0 0;
    }

    [data-theme="dark"] .navbar {
        background: #3D424D;
        border-bottom: 1px solid #555A66;

        .nav-link {
            color: white;
        }
    }

    [data-theme="light"] .navbar {
        background: #FFF;
        border-bottom: 1px solid #DADDE5
    }
    
    .navbar {
        .brand {
          @media (max-width: 480px) {
            overflow-x: hidden;
            width: 50px;
          }
        }
    }

    #nav-screen {
        .container {
            justify-content: flex-start;
            flex-direction: column;
        }
        .outlook-wrapper {
            display: flex;
            margin-top: 40px;
            justify-content: flex-start;
        }
    }

    .time-label-wrapper 
    {
        text-align: center;
        font-size: 14px;
        font-weight: 500;
    }
    .time-label-wrapper p{
        margin: 0;
    }

    .card-container {
        display: grid;
        grid-auto-columns: min-content;
        gap: 10px;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        box-sizing: border-box;

        a:hover {
            text-decoration: none;
        }
    
        .card {
            flex: 1;
            display: block;
            min-width: 220px;
            background: inherit;
            -webkit-transition: .3s all ease;
            transition: .3s all ease;
            border-radius: 8px;
            border: 1px solid #DADDE5;
            background-color: #FFF;
            overflow: hidden;

            h3 {
                font-size: 18px;
                font-weight: 600;
            }
        }
    }
    
    .card-container .card:hover {
        transform: scale(1.025);
        opacity: 1;
        text-decoration: none !important;
        transition: .3s all ease;
        opacity: .7;
        cursor: pointer;
    }
    
    .card-container .card .content {
        gap: 12px;
        padding: 20px;
        min-height: 150px;
    }
    
    .cards-heading {
        margin-top: 40px;
        margin-bottom: 20px;
        text-align: center;
    }

    @media all and (max-width: 500px) {
        .landing {
            .hero-img {
                margin: 0 auto;

                img {
                    margin-bottom: 0;
                }
            }
        }

        .card-container {
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

            .card {
                display: flex;
                flex-direction: row;

                img {
                    width: 100px;
                    object-fit: cover;
                }

                .content {
                    padding: 10px;
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    min-height: 0;

                    h3 {
                        font-size: 16px;
                        text-align: center;
                        margin: 0 !important;
                        padding: 0 !important;
                    }

                    p {
                        display: none;
                    }
                }
            }
        }
    }
    
    .intro-text {
        font-size: 16px !important;
        font-weight: 500 !important;
        margin-bottom: 20px;
    }
    
    .title-section {
        font-size: 22px;
        font-weight: 700;
    }

    [data-theme="dark"] .card {
        background-color: #3D424D;
    }
    
    [data-theme="dark"] .card-container .card .content {
        border-radius: 8px;
        color: $light-text;
    }
    
    [data-theme="light"] .card-container .card .content {
        border-radius: 8px;
        color: $dark-text;
    }
    
    .navbar .nav-item > .nav-link:hover::after, .navbar .nav-item > .nav-link.active::after {
        bottom: -6px;
        height: 3px;
    }

    .navbar {
        .nav-item {
            line-height: 3rem;

            .nav-link {
                display: block;
            }
        }
    }
    
    .fade-slide-y-enter-active {
        transition: all 0.15s ease;
    }
    
    .fade-slide-y-leave-active {
        transition: all 0.15s cubic-bezier(1, 0.5, 0.8, 1);
    }
    
    div.hero-img {
        pointer-events: none !important;
        cursor: default !important;
    }
    
    .page-meta .contributors {
        text-align: left !important;
    }
    
    .newsletter-button {
        color: #1755F4;

        [data-theme="dark"] & {
            color: #4075FF;
        }
    }
    
    .container{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .row{
        flex-wrap: nowrap;
        box-sizing: border-box;
        margin: 0;
        min-width: 0;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        max-width: 1024px;
        padding-bottom: 30px;
        padding-left: 9%;
        
    
    }
    #footer{
        padding: 20px 0 0 0;
        justify-content: center;
        display: flex;
        height: 80px;
    }
    .footer-links{
        display: flex;
        flex-direction: row;
    }
    .footer-links a:hover{
        text-decoration: underline;
    }
    .footer-social{
        padding-top: 1rem;  
    }

    .footer-social a, .footer-links a{
        padding: 1rem 1rem 0 1rem;
    }
    
    [data-theme="dark"] #footer {
        background-color: #24262b !important;
    }
    
    [data-theme="light"] #footer {
        background-color: #f5f6f7 !important;
    }
    .footer-col{
        width: 25%;
        padding: 0 15px;
    }
    .footer-col ul{
        list-style: none !important;
    }
    
    [data-theme="dark"] .footer-col h4 {
        color: $light-text !important;
    }
    
    [data-theme="light"] .footer-col h4 {
        color: $dark-text !important;
    }
    
    .footer-col ul li:not(:last-child){
        margin-bottom: 10px;
    }
    
    [data-theme="dark"] .footer-col ul li a {
        color: $light-text !important;
    }
    
    [data-theme="light"] .footer-col ul li a {
        color: $dark-text !important;
    }
    .footer-col ul li a:hover{
        color: #0759ff !important;
    }
    .footer-col ul li a:active{
        color: #0759ff !important;
    }
    .footer-col .social-links a{
        display: inline-block;
        height: 40px;
        width: 40px;
        background-color: rgba(255,255,255,0.2);
        margin:0 10px 10px 0;
        text-align: center;
        line-height: 40px;
        border-radius: 50%;
        color: #ffffff;
        transition: all 0.5s ease;
    }
    .footer-col .social-links a:hover{
        color: #24262b;
        background-color: #ffffff;
    }
    
    /*responsive*/
    @media(max-width: 767px){
        .footer-col{
            width: 50%;
            margin-bottom: 30px;
            
        }
        .row {
            flex-direction: column;
        }

        .footer-links{
            flex-direction: column;
        }
        .footer-links a{
            padding-top: 1rem;
        }

        .theme-container {
            min-height: calc(100vh - 300px);
            padding-bottom: 300px;
        }
    }
    @media(max-width: 574px){
        .footer-col{
            width: 100%;
        }
    }
    
    .toggle-sidebar-wrapper .arrow  {
        background-color: #edeff3;
        border-radius: 50%;
        font-size: 32px;
    }
    
    [data-theme="dark"] .toggle-sidebar-wrapper .arrow  {
        background-color: #24262b !important;
    }
    
    [data-theme="light"] .toggle-sidebar-wrapper .arrow {
        background-color: #f5f6f7 !important;
    }
    
    .theme-hope-content:not(.custom) > h3, .theme-hope-content:not(.custom) > h4 {
        margin-top: calc(-4.0rem);
        
    }

    .google-translate-select-flag {
        display: none !important;
    }

    html[data-theme="dark"] {
        #app {
            --code-bg-color: #131417;
        }
    }
    